<!DOCTYPE html>
<html>

	<head>
		<title>交易</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/common.css">
		<script language="javascript" src="../js/jquery-1.8.3.min.js"></script>

		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			
			.quotes {
				width: 100%;
				height: 60px;
				border-top: 1px solid #dadada;
				border-bottom: 1px solid #dadada;
				background: #fff;
				padding: 0px 0px;
				margin-top: 0px;
			}
			
			.buyForm p input[type="button"] {
				background: #27CDDB;
				width: 70%;
				margin: auto;
				color: #fff;
				border-radius: 20px;
				border: 0px;
				display: block;
				height: 40px;
				font-size: 16px;
			}
			
			.tips {
				font-size: 12px;
			}
			
			button {
				background: #27CDDB;
				width: 70%;
				margin: auto;
				color: #fff;
				border-radius: 20px;
				border: 0px;
				display: block;
				height: 40px;
				font-size: 16px;
				outline: none;
			}
			
			.quotes p,
			.quotes p s,
			.tabs dl dd a,
			.ac .quotes p:last-child span {
				color: #282633;
				font-size: 12px;
			}
			
			.quotes p:first-child {
				color: red;
				font-size: 12px;
			}
			
			.quotes p:last-child span s,
			.item dl dd strong {
				font-size: 12px!important;
			}
		</style>
	</head>

	<body style="background:#F6FAFD;">
		<div class="mui-content" id="aicVue" v-cloak>
			<!-- 行情 -->
			<div class="quotes">
				<p style="text-align: center;font-size: 18px;" id="currentPrice">￥{{priceBook.closePrice}}</p>
				<p>
					<span>
            高：<s>{{priceBook.highPrice}}</s>  <br/>  
      	    低：<s>{{priceBook.lowPrice}}</s>
      		</span>
					<span>
            量：<s>{{priceBook.vol}}</s>  <br/>  
      	    幅：<s>{{priceBook.rise * 100}}%</s>
      		</span>
				</p>
			</div>

			<div class="h10clear"></div>

			<!-- 选项卡 -->
			<div class="tabs">
				<dl>
					<dd>
						<a href="../main/tabjiaoyi.html">卖出</a>
					</dd>
					<dd class="ac">
						<a href="#">买入</a>
					</dd>
					<dd>
						<a href="../jiaoyi/transing-order.html">交易中订单</a>
					</dd>
				</dl>
			</div>

			<!-- 表单 -->
			<div class="buyForm">
				<form id="form1" name="form1" method="post" action="">
					<p><label>价格</label><input type="number" id="price" name="price" placeholder="请输入价格" v-model="price" /></p>
					<p><label>数量</label><input type="number" id="nums" name="nums" placeholder="请输入交易数量" v-model="number" /></p>
					<p style="margin-top:5px;"><span style="padding: 0px 0px 0px 22px;">总价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{total()}}</span></p>
					<p><br/><button type="button" onclick="vm.validateForm()">提交订单</button></p>
					<p class="tips">**买方30分钟不付款，系统自动撤销并记警告</p>
					<p class="tips" style="padding-top: 0px;">**警告达3次冻结账号7天，且矿机停止收益</p>
					<p class="tips" style="padding-top: 0px;">**买家当天累计取消5次交易中订单将禁止当天交易</p>
					<p class="tips" style="padding-top: 0px;">**买家恶意确认付款，直接封号</p>
					<p class="tips" style="padding-top: 0px;">**卖家已收款6小时内不确认，记严重警告1次</p>
					<p class="tips" style="padding-top: 0px;">**严重警告累计3次，直接封号</p>
				</form>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/validator.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script language="javascript">
			mui.init();
			var vm = new Vue({
				el: '#aicVue',
				data: {
					price: "",
					number: "",
					priceBook: {
						rise: 0.01
					},
					coinMinQty: 10
				},
				mounted: function() {
					mui.plusReady(function() {
						vm.priceBook = JSON.parse(plus.storage.getItem("priceBook"));
						var config = JSON.parse(plus.storage.getItem("config"));
						vm.coinMinQty = config.coinMinQty;
					});
				},
				methods: {
					commit: function() {
						var data = {
							"coinPrice": vm.price,
							"coinQuantity": vm.number
						}
						mui.postJSON(SendBuyOrder, data, function(result) {
							mConsole.log("买入:" + JSON.stringify(result));
							if(result.code == 0) {
								mymui("提交成功");
								return;
							}
							mymui(result.msg);
						});
					},
					validateForm: function() {
						if(validator.isEmpty(vm.price)) {
							mymui("请输入买入价格");
							return;
						}
						if(!validator.isCurrency(vm.price, {
								digits_after_decimal: [1, 2]
							})) {
							mymui("请输入正确买入价格");
							return;
						}
						if(validator.isEmpty(vm.number)) {
							mymui("请输入买入数量");
							return;
						}
						if(!validator.isInt(vm.number)) {
							mymui("数量必须为整数");
							return;
						}
						if(parseInt(vm.number) < parseInt(vm.coinMinQty)) {
							mymui("最低起买数量为" + vm.coinMinQty + "个AIC");
							return;
						}
						vm.commit();
					},
					total: function() {
						var m = 0,
							s1 = this.price,
							s2 = this.number;
						try {
							m += s1.split(".")[1].length;
						} catch(e) {}
						try {
							m += s2.split(".")[1].length;
						} catch(e) {}
						return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
					}
				}
			});
			
			$(document).ready(function() {
				$("#currentPrice").toggle(function() {
						vm.priceBook = JSON.parse(plus.storage.getItem("priceBookUSD"));
						$("#currentPrice").text("$ " + vm.priceBook.closePrice);
					},
					function() {
						vm.priceBook = JSON.parse(plus.storage.getItem("priceBook"));
						$("#currentPrice").text("￥" + vm.priceBook.closePrice);
					}
				);
			});
		</script>
	</body>

</html>